<template>
  <el-form class="add-event-front-events" v-if="frontEvent">
    <switch-normal v-model="frontEvent.comps[0].attrs.isBreak" label="中断事件" @change="onUpdateEvent"></switch-normal>
    <switch-normal v-model="frontEvent.comps[0].attrs.isCommonFrontEvents" label="优先执行" @change="onUpdateEvent"></switch-normal>
    <div v-if="isSwiper">
      <input-normal label="交互关联id" v-model="frontEvent.comps[1].attrs.relateCompId" @change="onUpdateEvent"></input-normal>
    </div>
    <div v-else-if="isRandomOpenPage">
      <input-normal label="交互关联id" v-model="frontEvent.comps[1].attrs.relateCompId" @change="onUpdateEvent"></input-normal>
      <textarea-normal label="规则" v-model="frontEvent.comps[1].attrs.rules" @change="onUpdateEvent"></textarea-normal>
    </div>
    <div v-else-if="isWeiboWeixin">
      <input-normal label="微博关联id" v-model="frontEvent.comps[1].attrs.weiboCompId" @change="onUpdateEvent"></input-normal>
      <input-normal label="微信关联id" v-model="frontEvent.comps[1].attrs.weixinCompId" @change="onUpdateEvent"></input-normal>
    </div>
    <div v-else-if="isChangeRelateCompData">
      <textarea-normal label="关联组件数据" v-model="frontEvent.comps[1].attrs.compIdObj" @change="onUpdateEvent"></textarea-normal>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { FRONT_EVENT_TYPE_MAPS } from '@/const/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()


let frontEvent_: any
const frontEvent = computed(() => {
  frontEvent_ = useWebComponent.currentComponentData!.events.frontEvents
  return frontEvent_
})

const isSwiper = computed(() => {
  const type = frontEvent_.comps[0].attrs.value
  if(type == FRONT_EVENT_TYPE_MAPS.swiper) {
    return true
  } else {
    return false 
  }
})
const isRandomOpenPage = computed(() => {
  const type = frontEvent_.comps[0].attrs.value
  const str = frontEvent_.comps[1].attrs.value
  if(type == FRONT_EVENT_TYPE_MAPS.randomOpenPage && str.length > 0) {
    return true
  } else {
    return false 
  }
})
const isWeiboWeixin = computed(() => {
  const type = frontEvent_.comps[0].attrs.value
  if(type == FRONT_EVENT_TYPE_MAPS.weiboWeixin) {
    return true
  } else {
    return false 
  }
})
const isChangeRelateCompData = computed(() => {
  const type = frontEvent_.comps[0].attrs.value
  if(type == FRONT_EVENT_TYPE_MAPS.changeRelateCompData) {
    return true
  } else {
    return false 
  }
})
const onUpdateEvent = () => {
  const event = useWebComponent.currentComponentData!.events.saveImg
  useWebComponent.updateEvent({ type: event.type, event })
}
</script>